<template>
	<view class="" style="width: 100%; overflow: hidden;">
		<view class="tab-box">
			<view v-for="(item,index) in tabList" :class="['tab-item',tabIndex == index ? 'active' : '']"
				@click="tab(index)" :key="index">
				{{item}}
			</view>
		</view>
	</view>


	
</template>

<script>
	export default {
		name: "top-tap",
		props: {
			tabList: {
				type: Array,
				default: () => []
			},
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabCur:this.value,
				tabIndex: this.value
			};
		},
		watch: {
			value(val) {
				this.tabIndex = val;
			},
		},
		methods: {
			tab(index) {
				if (!this.disabled) {
					this.tabIndex = index;
					this.tabCur = index
					this.$emit('input', index);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		// width: 2000;
		// height: 100rpx;
		flex-shrink: 0;
		// display: flex;
		background: #FFFFFF;
        overflow: auto;
		flex-wrap: nowrap;
		margin-bottom: 50rpx;
		.tab-item {
			display: table-cell;
			float: left;
			position: relative;
			text-align: center;
			line-height: 100rpx;
			font-family: PingFang SC Regular;
			font-size: 36rpx;
			color: #666666;
            width: 50%;
			&.active {
				&::after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					margin: 0 auto;
					width: 50%;
					height: 6rpx;
					background:#004EE8;
					border-radius: 3rpx;
				}

				color: #315BF1;
			}
		}
	}
	.ct_tab{
		    width: 650rpx;
			height: 80rpx;
		    margin: 0 auto;
		    padding: 30rpx 0;
		    font-size: 36upx;
		    // font-weight: bold;
		    color: #c0c8d0;
		    white-space: nowrap;
		    display: flex;
		    overflow: hidden;
		}
		.ct_item{
		    width: 120upx;    
		    padding: 30rpx 0;
		    display: inline-block;
		}
		.ct_item text{
		    padding: 30rpx 0;
		}
		.ct_active{
		    color:#007AFF;
		}
		.ct_active text{
		    border-bottom: 2px solid #007AFF;
		}
		swiper{
		    width:100%;
		}
		
		swiper-item{
		    width: 120upx !important;
		}
	
	
</style>
